<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Pull to refresh</title>

	<style type="text/css">

		#pullToRefreshPanel {
 			position: absolute;
			top: 0px;
			width: 100%;
			z-index: 100;
			font-weight: bold;
			overflow: hidden;
			background-color: #E4E7EE;
			padding-left: 20px;
		}

		#pullToRefreshPanel > div {
			position: inherit;
			bottom: 12px;
			padding-left: 22px;
			width: 100%;
			height: 100%;
			color: #6E8098;
			background-repeat: no-repeat;
			background-position: bottom left;
		}

		#pullToRefreshPanel > div > div {
			position: absolute;
			bottom: 4px;
		}

		.pullDownToUpdate > div {
 			background-image: url('images/pull-arrow.png');
		}

		.pullDownToUpdate > div > div:before {
			content: "Pull down to update";
		}

		.releaseToUpdate > div {
 			background-image: url('images/release-arrow.png');
		}
		
		.releaseToUpdate > div > div:before {
			content: "Release to update";
		}

	</style>

	<link rel="stylesheet" type="text/css" href="../themes/iphone/iphone.css"></link>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
	<script type="text/javascript">
	require([
	     	"dojo/ready",
	     	"dojo/on",
	     	"dojo/dom",
	     	"dojo/dom-class",
	     	"dijit/registry",
	     	"dojox/mobile/parser",
	     	"dojox/mobile",
	     	"dojox/mobile/compat",
	     	"dojox/mobile/ScrollableView",
	     	"dojox/mobile/Heading",
	     	"dojox/mobile/RoundRect",
	     	"dojox/mobile/RoundRectList"
	     ], function(ready, on, dom, domClass, registry){
	     	ready(function(){				
	     		var pullToRefreshPanel = dom.byId("pullToRefreshPanel");
	     		var topMessage = dom.byId("topMessage");
	     		var scrollableView = registry.byId("sview");
	     		var pullToRefreshPanelDisplayed = false;
	     		var refreshOnTouchEnd = false;
	     		var numberOfUpdates = 0;

	     		var displayPullToRefreshPanel = function() {
 					pullToRefreshPanelDisplayed = true;
 					pullToRefreshPanel.style.display="block";
	     		};

	     		var hidePullToRefreshPanel = function() {
 					pullToRefreshPanelDisplayed = false;
 					pullToRefreshPanel.style.display="none";
	     		};
	     		
	     		scrollableView.on("beforescroll", function(evt){
	     			if(evt.beforeTop){
	     				// display the pullToRefreshPanel panel if it is not
	     				if(!pullToRefreshPanelDisplayed){
	     					displayPullToRefreshPanel();
	     				}
	     				// resize the pullToRefreshPanel according to the scroll destination
	     				pullToRefreshPanel.style.height= evt.beforeTopHeight + "px";
	     				pullToRefreshPanel.style.top= -evt.beforeTopHeight + "px";
	     			}else{
	     				// hide the pullToRefreshPanel panel if it is displayed
	     				if(pullToRefreshPanelDisplayed){
	     					hidePullToRefreshPanel();
	     				}
	     			}
	     			if(evt.beforeTopHeight > 80){
	     				domClass.remove(pullToRefreshPanel, "pullDownToUpdate");
	     				domClass.add(pullToRefreshPanel, "releaseToUpdate");
	     				refreshOnTouchEnd = true;
	     			}else{
	     				domClass.remove(pullToRefreshPanel, "releaseToUpdate");
	     				domClass.add(pullToRefreshPanel, "pullDownToUpdate");
	     				refreshOnTouchEnd = false;
	     			}
	     		});

	     		scrollableView.on("touchend", function(evt){
	     			// We're done scrolling:
	     			// - hide the pullToRefreshPanel if it is displayed
	     			// - perform refresh if specified
     				if(pullToRefreshPanelDisplayed){
     					hidePullToRefreshPanel();
     				}
     				if(refreshOnTouchEnd){
     					refreshOnTouchEnd = false;
     					topMessage.innerHTML = "Content updated " + ++numberOfUpdates + " time !";
     				}
	     		});

	     	});
	     });
	</script>

</head>
<body style="visibility:hidden;">
	<div id="sview" data-dojo-type="dojox.mobile.ScrollableView">
 		<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">Pull to refresh</h1>
		<div id="pullToRefreshPanel" style="display: none;">
			<div><div></div></div>
		</div>
		<div id="topMessage" data-dojo-type="dojox.mobile.RoundRect">
			This page implements a demo of the "pull to refresh" feature that can be seen in iOS applications like Facebook. Touch the screen and pull down to reveal the feature...
		</div>
		<ul data-dojo-type="dojox.mobile.RoundRectList">
			<li data-dojo-type="dojox.mobile.ListItem">Item 001</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 002</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 003</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 004</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 005</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 006</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 007</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 008</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 009</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 010</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 011</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 012</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 013</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 014</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 015</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 016</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 017</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 018</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 019</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 020</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 021</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 022</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 023</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 024</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 025</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 026</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 027</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 028</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 029</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 030</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 031</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 032</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 033</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 034</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 035</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 036</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 037</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 038</li>
		</ul>
	</div>
</body>
</html>
